<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="/css/detail.css" />
    <script type="text/javascript">

        function addFocus(id) {
            location.href = '/user/addFocus/' + id
            alert("已关注成功，查看关注列表~")
        }

        //TODO: 延迟加载评论模块，和 thymeleaf 传值给 js
        /*延迟加载评论模块*/
        setTimeout(function() { loadComments([[${goods.id}]]); }, 500);  //0.5 秒后将会调用执行 loadComments()函数
        function loadComments(goodsId){
            /*alert(goodsId)*/
            $("#detailGoods-comment").load("/goods/detailGoodsComments/"+goodsId);
        }

        /* 前往支付 */
        function toPay(id) {
            window.location.href = '/goods/buyId/' + id
        }

        function getGoodsCateByCid(cid) {
            $("#detailGoods-Content").empty();
            $(".main-content").load("/goods/catelog/" + cid + ".html");
            $("#homeGoods-ng").load("/goods/catelogNavigation");
        }

    </script>


<body ng-view="ng-view">
<!--
  描述：左侧导航条
  -->
<div ng-controller="sidebarController" class="sidebar stark-components ng-scope" id="homeGoods-ng">
    <!-- js 加载物品目录信息 -->
</div>
<!--
       描述：右侧显示部分
  -->
<div class="main-content"><!-- js 加载分类物品信息 --></div>

<div id="detailGoods-Content">
    <!--显示商品详情-->
    <div ng-controller="detailBoxController" class="detail-box stark-components z-depth-1 row ng-scope">
        <div class="col s12 path">
            <!--   <a  th:href="@{/goods/catelog/{id}.html(id=${catelog.id})}" th:text="${catelog.name}"></a>-->
            <a href="javaScript:void(0)" th:onclick="'javascript:getGoodsCateByCid('+${catelog.id}+')'"
               th:text="${catelog.name}"></a>
            <em>></em>
            <!--/*@thymesVar id="goods" type="java.lang.String"*/-->
            <a th:text="${goods.name}"></a>
        </div>
        <div class="col s6">
            <div class="slider" style="height: 440px;">
                <ul class="slides" style="height: 400px;">
                    <!--<img th:src="@{/upload/{imgUrl}(imgUrl=${img.imgUrl})}"/>-->
                    <img th:src="@{/upload/{imgUrl}(imgUrl=${img.imgUrl})}" th:if="${img != null and ! #strings.startsWith(img.imgUrl,'http://')}"/>
                    <img th:src="@{{imgUrl}(imgUrl=${img.imgUrl})}" th:if="${img != null and #strings.startsWith(img.imgUrl,'http://')}"/>
                </ul>
                <ul class="indicators">
                    <li class="indicator-item"></li>
                    <li class="indicator-item"></li>
                    <li class="indicator-item"></li>
                    <li class="indicator-item"></li>
                </ul>
            </div>
        </div>
        <div class="col s6">
            <h1 class="item-name" th:text="${goods.name}"></h1>
            <h2 class="item-price" th:text="${goods.price}"></h2>
            <h2 class="publisher-info-title">原价：<span style="text-decoration:line-through;"
                                                      th:text="${goods.realPrice}"></span></h2>
            <div class="item-public-info">
                <p class="bargain">可讲价</p>
                <p>
                    <i class="iconfont"></i>
                    <em class="item-location">宿州学院</em>
                </p>
            </div>
            <div class="publisher-info-title">
                <em>卖家信息</em>
                <hr>
            </div>
            <div class="item-contact" th:if="${session.cur_user == null}">
                <p class="not-login">
                    <a onclick="showLogin()">登录</a>
                    <em>或</em>
                    <a onclick="showSignup()">注册</a>
                    <em>后查看联系信息</em>
                </p>
            </div>
            <div class="item-contact" th:if="${session.cur_user != null}">
                <div>
                    <div class="base-blue z-depth-1 attr">
                        <i class="iconfont"></i>
                    </div>
                    <div class="value" th:text="${seller.username}"></div>
                </div>
                <div>
                    <div class="base-blue z-depth-1 attr">
                        <i class="iconfont"></i>
                    </div>
                    <div class="value" th:text="${seller.phone}"></div>
                </div>
                <div>
                    <div class="base-blue z-depth-1 attr">
                        <i class="iconfont"></i>
                    </div>
                    <div class="value" th:text="${seller.qq}" th:if="${seller.qq !=null}"></div>
                    <div class="value" th:if="${seller.qq == null}">该同学没留下QQ</div>
                </div>
                <div>
                    <input type="button" value="加入关注" class="blue lighten-1 waves-effect waves-light btn" id="btn_cart"
                           th:onclick="'javascript:addFocus('+${goods.id}+')'" th:if="${session.cur_user != null}"></input>
                </div>

            </div>

            <h1 class="item-pub-time">发布于<span th:text="${goods.startTime}"></span></h1>
        </div>
    </div>
    <div class="detail-box stark-components z-depth-1 row">
        <h1 class="title">商品描述</h1>
        <hr class="hr1"/>
        <hr class="hr2"/>
        <p class="section">描述：<span th:text="${goods.describle}"></span></p>
        <p class="section"></p>
        <p class="section">
            联系我的时候，请说明是在“宿院短租平台”上看见的哦~
        </p>
    </div>
    <div id="detailGoods-comment">
        <!-- js 延时加载评论 -->
    </div>
</div>
</body>
</html>